<template>
    <div>
      <el-button type="primary" size="mini" class="add" @click="handleAddClick()">添加商户</el-button>
      <seller-add-dialog :dialogAddVisible="dialogAddVisible"
                         :dialogInfo="dialogInfo"
                         @search="search"
                         @selection-change="handleSelectionChange"
                         @update:dialogAddVisible="dialogVisibles">

      </seller-add-dialog>

      <seller-see-dialog :dialogSeeVisible="dialogSeeVisible"
                         :dialogInfo="dialogInfo"
                         :fileList="fileList"
                         @search="search"
                         @selection-change="handleSelectionChange"
                         @update:dialogSeeVisible="dialogSeeVisibles">

      </seller-see-dialog>
      <el-button type="danger" size="mini" class="add" @click="handleRemoveClick()">删除商户</el-button>
      <!-- 删除提示框 -->
      <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
        <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
        <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow" >确 定</el-button>
            </span>
      </el-dialog>

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection">
        </el-table-column>
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="id"-->
<!--          label="id">-->
<!--        </el-table-column>-->
        <el-table-column
          prop="name"
          label="商户名称">
        </el-table-column>
        <el-table-column
          prop="remarkScore"
          label="评分">
        </el-table-column>
        <el-table-column
          label="注册日期">
          <template slot-scope="scope">{{dateFormat(scope.row.createdAt)}}</template>
        </el-table-column>
        <el-table-column label="状态" width="100">

          <template slot-scope="scope">
            <el-switch v-model="scope.row.disabledFlag===1" @change='changeStatus(scope.row)'></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchData.page"
          :page-sizes="[5,10, 20, 50]"
          :page-size="searchData.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount">
        </el-pagination>
      </div>
    </div>
</template>

<script>
    import { pageRequest , disable ,remove } from '@/api/seller'
    import { getUrl } from  '@/api/file'
    import SellerAddDialog from "./components/sellerAddDialog"; //引入组件
    import SellerSeeDialog from "./components/sellerSeeDialog"; //引入组件
    import { dateFormat } from '@/utils/dateUtils'
    export default {
      name: "SellerManage",
      components: {
        SellerAddDialog,
        SellerSeeDialog
      },
      data() {
        return {
          //控制弹窗 显示
          dialogSeeVisible: false,
          delVisible: false,
          dialogAddVisible: false,
          //点击查看按钮  这条数据详细信息
          dialogInfo:{},
          fileList:[],
          totalCount:0,
          tableData: [],
          multipleSelection: [],
          multipleSelectionIds:[],
          searchData:{
            page: 1,
            size: 5,
          }
        }
      },
      mounted() {
        this.search();
      },
      methods: {
        dateFormat(date){
          return  dateFormat(date);
        },
        //点击查看 按钮  的事件
        handleAddClick() {
          this.dialogAddVisible = true;

        },
        handleRemoveClick(){
          if (this.multipleSelection.length===0){
            this.$message.warning("请选择至少一条记录");
          }else{
            this.delVisible = true;
          }
        },
        deleteRow(){
          remove(this.multipleSelectionIds).then((response) => {
            this.delVisible = false;
            this.$message.success("删除成功");
            this.search()
          }).catch((response) => {
            console.log(response);
          })
        },
        changeStatus(data){
          if (data.disabledFlag===1){
            data.disabledFlag=0
          }else{
            data.disabledFlag=1
          }
          disable(data).then((response) => {
              this.search()
          }).catch((response) => {
            console.log(response);
          })
        },
        //点击查看 按钮  的事件
        handleClick(info) {
          this.dialogSeeVisible = true;
          this.dialogInfo = info;
          getUrl(info.img).then((response) => {
            this.dialogInfo.imgUrl = response.data;
            if (response.data !==null&&response.data.length!==0){
              this.fileList=[{name: this.dialogInfo.name,url: response.data}];
            }else{
              this.fileList=[];
            }
          }).catch((response) => {

          })
        },
        //子组件传 过来的 数据
        dialogVisibles(v){
          this.dialogAddVisible = v
        },
        dialogSeeVisibles(v){
          this.dialogSeeVisible = v
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
          this.multipleSelectionIds = [];
          this.multipleSelection.forEach(selection=>{
            this.multipleSelectionIds.push(selection.id);
          })
        },
        handleSizeChange(val) {
          this.search();
          this.searchData.size= val;
        },
        handleCurrentChange(val) {
          this.search();
          this.searchData.page= val;
        },
        search(){
          pageRequest(this.searchData).then((response) => {
            this.tableData = response.data.pageList;
            // this.tableData.forEach(data=>{
            //     if (data.img !=null && data.img !== ""){
            //       data.img = getUrl(data.img);
            //     }
            //
            // })
            this.totalCount = response.data.totalCount;
          }).catch((response) => {
            console.log(response);
          })
        }
      }
    }
</script>

<style scoped>
  .add{
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
  }
</style>
